<template>
  <div class="app-container">

    <div class="custom_card_0">
      <el-form inline :model="queryParams" size="mini" ref="queryForm" label-width="110px" label-position="right">
        <el-form-item label="SIM卡号" prop="receiveDevice">
          <el-input v-model="queryParams.receiveDevice" clearable placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="instructionStatus">
          <el-select v-model="queryParams.instructionStatus" clearable>
            <el-option label="成功" :value="1"></el-option>
            <el-option label="失败" :value="2"></el-option>
            <el-option label="待发送" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发送时间" prop="startTime">
          <el-date-picker clearable size="small" v-model="time" type="daterange" range-separator="至"
                          value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="custom_card_0" style="padding-bottom: 20px">
      <el-table :data="commandList" border :header-cell-style="{background:'#eef1f6',color:'#606266'}">

        <el-table-column align="center" label="指令名称" prop="instructionName"></el-table-column>
        <el-table-column align="center" label="发送类型" prop="isOffline">
          <template v-slot="scope">
            <span>{{0==scope.row.isOffline?'在线':1==scope.row.isOffline?'离线':''}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发送时间" prop="sendTime"></el-table-column>
        <el-table-column align="center" label="IMEI" prop="receiveDevice"></el-table-column>
        <el-table-column align="center" label="SIM卡号" prop="simCard"></el-table-column>
        <el-table-column align="center" label="关联车辆" prop="carNo"></el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
    </div>


  </div>
</template>

<script>
import {instructionlist} from "@/api/mmv";

export default {
  name:'Command',
  data() {
    return {
      time: [],
      queryParams: {
        startTime:null,
        endTime:null,
        instructionStatus:null,
        receiveDevice:null,
        pageNum:1,
        pageSize:10,
      },
      commandList: [],
      total: 0
    }
  },
  mounted() {
    this.getList()
  },
  activated() {
    this.getList()
  },
  methods: {
    handleQuery() {
      if(this.time && this.time.length > 0){
        this.queryParams.startTime = this.time[0]
        this.queryParams.endTime = this.time[1]
      }
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams = {
        startTime:null,
        endTime:null,
        instructionStatus:null,
        receiveDevice:null,
        pageNum:1,
        pageSize:10,
      }
      this.resetForm('queryForm')
      this.handleQuery()
    },
    getList() {
      instructionlist(this.queryParams).then(res=>{
        this.commandList = res.rows
        this.total = res.total
      })
    }
  }
}
</script>

<style scoped>

</style>
